<template>
  <a-modal
    :open="props.modelVisible"
    title="任务统计"
    :footer="null"
    @Cancel="emit('update:modelVisible', false)"
    width="95%"
    wrap-class-name="full-modal"
    centered
  >
    <div
      style="
        background-color: #eef3fc;
        padding: 1%;
        display: flex;
        min-width: 960px;
        height: 100%;
        min-height: 540px;
      "
    >
      <div
        style="
          width: 70%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        "
      >
        <!-- 统计 -->
        <div style="height: 30%; background-color: #fff; margin: 0 2% 0 0; padding: 1%">
          <div
            style="
              text-align: center;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            "
          >
            <a-row :gutter="16" style="padding: 0 1%; display: flex; justify-content: space-around">
              <a-col
                :class="boxes[0].isActive ? 'gutter-box-active' : 'gutter-box'"
                :span="5"
                @click="toggleActive(0)"
                style="margin: 0 4px"
              >
                <a-statistic title="分配总数">
                  <template #formatter>
                    <span class="task-value">{{ assignmentNumber.total }}</span>
                  </template>
                </a-statistic>
              </a-col>
              <a-col
                :class="boxes[1].isActive ? 'gutter-box-active' : 'gutter-box'"
                :span="5"
                @click="toggleActive(1)"
                style="margin: 0 4px"
              >
                <a-statistic title="已完成">
                  <template #formatter>
                    <span class="task-value">{{ assignmentNumber.completed }}</span>
                  </template>
                </a-statistic>
              </a-col>
              <a-col
                :class="boxes[2].isActive ? 'gutter-box-active' : 'gutter-box'"
                :span="5"
                @click="toggleActive(2)"
                style="margin: 0 4px"
              >
                <a-statistic title="未完成">
                  <template #formatter>
                    <span class="task-value">{{ assignmentNumber.inProgress }}</span>
                  </template>
                </a-statistic>
              </a-col>
              <a-col
                :class="boxes[3].isActive ? 'gutter-box-active' : 'gutter-box'"
                :span="5"
                @click="toggleActive(3)"
                style="margin: 0 4px"
              >
                <a-statistic title="待领取">
                  <template #formatter>
                    <span class="task-value">{{ assignmentNumber.notStarted }}</span>
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
            <a-row :gutter="16" style="padding: 0 1%; display: flex; justify-content: space-around">
              <a-col
                :class="boxes[4].isActive ? 'gutter-box-active' : 'gutter-box'"
                :span="5"
                @click="toggleActive(4)"
                style="margin: 0 4px"
              >
                <a-statistic title="延期任务">
                  <template #formatter>
                    <span class="task-value">{{ assignmentNumber.extension }}</span>
                  </template>
                </a-statistic>
              </a-col>
              <a-col
                :class="boxes[5].isActive ? 'gutter-box-active' : 'gutter-box'"
                :span="5"
                @click="toggleActive(5)"
                style="margin: 0 4px"
              >
                <a-statistic title="待验收">
                  <template #formatter>
                    <span class="task-value">{{ assignmentNumber.notReviewed }}</span>
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="5" style="margin: 0 4px">
                <a-statistic>
                  <template #title>
                    <span style="margin-left: 11px">完成率</span>
                    <a-tooltip placement="right">
                      <template #title>
                        <span>已完成任务/任务总数</span>
                      </template>
                      <question-circle-two-tone style="margin-left: 5px" />
                    </a-tooltip>
                  </template>
                  <template #formatter>
                    <span style="color: #73d897" class="task-value">
                      {{
                        assignmentNumber.total === 0
                          ? 0 + '%'
                          : ((assignmentNumber.completed / assignmentNumber.total) * 100).toFixed(
                              1
                            ) + '%'
                      }}</span
                    >
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="5" style="margin: 0 4px">
                <a-statistic>
                  <template #title>
                    <span style="margin-left: 11px">延期率</span>
                    <a-tooltip placement="right">
                      <template #title>
                        <span>延期未完成/任务总数</span>
                      </template>
                      <question-circle-two-tone style="margin-left: 5px" />
                    </a-tooltip>
                  </template>
                  <template #formatter>
                    <span style="color: #ff7575" class="task-value">
                      {{
                        assignmentNumber.total === 0
                          ? 0 + '%'
                          : ((assignmentNumber.extension / assignmentNumber.total) * 100).toFixed(
                              1
                            ) + '%'
                      }}</span
                    >
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
          </div>
        </div>
        <!-- 分配记录 -->
        <div
          style="height: 60%; background-color: #fff; margin: 0 2% 0 0; padding: 1%; overflow: auto"
        >
          <a-list :data-source="assignmentList" item-layout="horizontal" :loading="loading">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #title>
                    <a @click="showDrawer(item.taskId)" style="margin-right: 2%">{{
                      item.taskName
                    }}</a>
                    <span v-if="item.taskType == 0"><a-tag color="blue"> 课程任务</a-tag></span>
                    <span v-else-if="item.taskType == 1"
                      ><a-tag color="green">需求任务</a-tag></span
                    >
                    <span v-else-if="item.taskType == 2"><a-tag color="cyan">开发任务</a-tag></span>
                    <span v-else-if="item.taskType == 3"
                      ><a-tag color="yellow">测试任务</a-tag></span
                    >
                    <span v-else-if="item.taskType == 4"
                      ><a-tag color="orange">缺陷任务</a-tag></span
                    >
                  </template>
                  <template #description>
                    <div style="display: flex">
                      <div style="margin-right: 30px">
                        {{ '创建时间：' + dayjs(item.createTime).format('YYYY-MM-DD  HH:mm:ss') }}
                      </div>
                      <div style="display: flex">
                        <span style="white-space: nowrap">承担人：</span>
                        <div style="display: flex; flex-wrap: wrap">
                          <span v-for="user in item.userList">
                            {{ user.userName }}
                            <a-divider type="vertical"></a-divider>
                          </span>
                        </div>
                      </div>
                    </div>
                  </template>
                </a-list-item-meta>
                <template #actions>
                  <a-tag color="default">{{
                    '截止日期：' + dayjs(item.endTime).format('YYYY-MM-DD  HH:mm:ss')
                  }}</a-tag>
                </template>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>
      <!-- 筛选 -->
      <div
        style="
          width: 30%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        "
      >
        <div style="height: 95%; background-color: #fff; padding: 1% 20px; text-align: center">
          <span class="select-title">筛选</span>
          <a-divider style="margin: 0" />
          <div v-if="projectType == 2">
            <span class="select-title">课程</span>
            <div style="width: 100%; margin-bottom: 5px">
              <a-select
                ref="select"
                :field-names="{ label: 'courseName', value: 'courseId' }"
                allow-clear
                placeholder="筛选课程"
                v-model:value="courseSelect"
                style="width: 95%"
                :options="courseOptions"
                @change="findTasksAssignments()"
              >
              </a-select>
            </div>
          </div>

          <span class="select-title">任务类型</span>
          <div style="width: 100%; margin-bottom: 5px">
            <a-select
              ref="select"
              v-model:value="taskTypeSelect"
              style="width: 95%"
              allow-clear
              placeholder="筛选任务"
              :options="taskTypeOptions"
              @change="findTasksAssignments()"
            >
            </a-select>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
  <TaskDrawer
    v-model:model-visible="openDrawer"
    :task-id="taskId"
    :course-list="courseOptions"
    @confirm="findTasksAssignments()"
  />
</template>

<script lang="ts" setup>
import TaskDrawer from '@/views/ProjectDetails/ProjectTaskPage/taskDrawer.vue';
import type { SelectProps } from 'ant-design-vue';
import TaskDao from '@/daos/task_dao';
import dayjs from 'dayjs';
import { useStore } from 'vuex';

const store = useStore();
const taskDao = new TaskDao();

const props = defineProps({
  modelVisible: {
    type: Boolean,
    default: false
  },
  taskTable: {
    type: Number,
    default: false
  }
});

const emit = defineEmits(['update:modelVisible']);

//点击统计触发开关
let boxes = reactive([
  { isActive: false },
  { isActive: false },
  { isActive: false },
  { isActive: false },
  { isActive: false },
  { isActive: false }
]);
//点击统计数字触发修改样式事件
const toggleActive = (index) => {
  // 重置所有 box 的 isActive 状态
  boxes.forEach((box) => (box.isActive = false));
  // 设置点击的 box 的 isActive 状态为 true
  boxes[index].isActive = true;

  if (index == 0) {
    assignmentStatus.value = null;
  } else if (index == 1) {
    assignmentStatus.value = 3;
  } else if (index == 2) {
    assignmentStatus.value = 1;
  } else if (index == 3) {
    assignmentStatus.value = 0;
  } else if (index == 4) {
    assignmentStatus.value = 111;
  } else if (index == 5) {
    assignmentStatus.value = 2;
  }
  findTasksAssignments();
};

//项目ID
const projectId = store.getters.projectId;
//项目类型
const projectType = store.getters.projectType;
//任务ID
const taskId = ref();
//任务抽屉参数
const openDrawer = ref<boolean>(false);
//触发打开抽屉方法
const showDrawer = (id) => {
  console.log(id);
  taskId.value = id;
  openDrawer.value = true;
};
//选中分配记录状态
const assignmentStatus = ref();
//分配记录
const assignmentList = ref();
//项目分配记录数目
const assignmentNumber = ref({
  completed: 0,
  extension: 0,
  inProgress: 0,
  notReviewed: 0,
  notStarted: 0,
  total: 0
});
//列表加载状态
const loading = ref(true);
//查询项目任务的分配数量
const findTaskNumber = async () => {
  const result = await taskDao.findTaskAssignmentNumber(projectId, 1);
  assignmentNumber.value = result.data.data;
};
//查询项目具体的分配记录
const findTasksAssignments = () => {
  loading.value = true;
  taskDao
    .findAssignmentsByProjectId(
      projectId,
      assignmentStatus.value,
      taskTypeSelect.value,
      courseSelect.value,
      projectType
    )
    .then((result) => {
      assignmentList.value = result.data.data;
      loading.value = false;
    })
    .catch((error) => {
      console.error('查询项目的分配记录错误', error);
      loading.value = false;
    });
};

// 课程-筛选

const courseOptions = store.getters.courseList;
const courseSelect = ref(null);

//任务类型-筛选
const taskTypeSelect = ref(null);
const taskTypeOptions = ref<SelectProps['options']>([
  {
    value: 1,
    label: '需求任务'
  },
  {
    value: 2,
    label: '开发任务'
  },
  {
    value: 3,
    label: '测试任务'
  },
  {
    value: 4,
    label: '缺陷任务'
  },
  {
    value: 0,
    label: '课程任务'
  }
]);

watch(
  () => props.modelVisible,
  () => {
    findTaskNumber();
    toggleActive(props.taskTable);
  }
);
</script>
<style>
.select-title {
  height: 46px;
  line-height: 46px;
  color: #2a344b;

  float: left;
}

.gutter-box:hover {
  background: #f8faff;
  border: 1px solid #348fe4;
  cursor: pointer;
}

.gutter-box-active {
  background: #f8faff;
  border: 1px solid #348fe4;
}

.gutter-box {
  border: 1px solid #ffffff;
}

.task-type {
  height: 35%;
  background-color: #ffff;
}

.task-message {
  height: 60%;
  background-color: #ffff;
}

.task-select {
  height: 100%;
  width: 28%;
  margin: 1%;
  background-color: #ffff;
}

.full-modal {
  .ant-modal {
    max-width: 100%;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(95vh);
  }

  .ant-modal-body {
    flex: 1;
    overflow: auto;
  }
}
</style>
